import { Button, Table, Tag, Modal, Input } from 'antd';
import { EditTwoTone, ReloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { updateConf } from '@redux/conf/action';
import { connect } from 'react-redux';
import { useEffect, useState } from 'react';
import Header from 'components/ReturnHeader';

type KeyNamesType = 'prev_key' | 'next_key' | 'init_key' | 'split_key' | 'linner_key' | 'message_linner_key' | '';
type DefaultConfType = { keyname: KeyNamesType; label: string; sourcekey: string }; // 权限使用情况 - 展示

const DEFAULT_CONF: Array<DefaultConfType> = [
	{ label: '切换：上一个牌型', keyname: 'prev_key', sourcekey: 'ArrowLeft' },
	{ label: '切换：下一个牌型', keyname: 'next_key', sourcekey: 'ArrowRight' },
	{ label: '初始化：复原牌组', keyname: 'init_key', sourcekey: 'Escape' },
	{ label: '功能：按照预设分割牌组', keyname: 'split_key', sourcekey: 'Enter' },
	{ label: '功能：出现监听牌', keyname: 'linner_key', sourcekey: ' ' },
	{ label: '功能：出现监听牌，并判断', keyname: 'message_linner_key', sourcekey: 'q' },
];
const mapDispatchToProps = { updateConf };
const mapStateToProps = (state: any) => state.conf;

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(function (props: { updateConf: any } & Record<KeyNamesType, string>) {
	const navigate = useNavigate();
	const [open, setopen] = useState<boolean>(false);
	const [filterkey, setfilterkey] = useState<string>('');
	const [changeinfo, setchangeinfo] = useState<{ key: KeyNamesType; value: string }>({ key: '', value: '' });

	const setkey = ({ key: value }: { key: string }) => {
		setchangeinfo({ ...changeinfo, value });
	};
	useEffect(() => {
		open && window.addEventListener('keyup', setkey);
		return () => {
			window.removeEventListener('keyup', setkey);
		};
	}, [open]);

	return (
		<div>
			<Header title='快捷键配置' />
			<Input.Group compact className=' m-2'>
				<Input
					type='text'
					onChange={({ target: { value } }) => {
						setfilterkey(value);
					}}
					allowClear
					className=' w-64'
					placeholder='功能筛选'
				/>
				<Button
					onClick={() => {
						setfilterkey('');
					}}
					icon={<ReloadOutlined style={{ color: '#1890ff' }} />}></Button>
			</Input.Group>

			<Table
				dataSource={DEFAULT_CONF.filter(({ label }) => label.includes(filterkey))}
				pagination={false}
				rowKey={({ keyname }) => 'set-' + keyname}
				columns={[
					{
						title: '',
						key: 'edit',
						width: 100,
						align: 'center',
						render: (e, { keyname, sourcekey }, i: number) => (
							<>
								<i
									className='icon-class'
									onClick={(event) => {
										event.stopPropagation();
										setchangeinfo({ key: keyname, value: props[keyname] });
										setopen(true);
									}}
									key={'edit' + i}>
									<EditTwoTone />
								</i>
								{props[keyname] !== sourcekey && (
									<i
										className='icon-class'
										onClick={(event) => {
											event.stopPropagation();
											setchangeinfo({ key: keyname, value: sourcekey });
											setopen(true);
										}}
										key={'reso' + i}>
										<ReloadOutlined style={{ color: '#1890ff' }} />
									</i>
								)}
							</>
						),
					},
					{ title: '命令', dataIndex: 'label', width: 200 },
					{
						title: '键绑定',
						key: 'keybind',
						render: (e, { keyname }) => (
							<Tag className='inline' color='blue'>
								{props[keyname]}
							</Tag>
						),
					},
					{
						title: '源',
						key: 'source',
						width: 100,
						render: (e, { keyname, sourcekey }) => (props[keyname] == sourcekey ? '默认值' : '用户配置'),
					},
				]}
			/>

			<Modal
				title='请按下需要绑定的按键'
				open={open}
				onOk={() => {
					const setobj: { [key in KeyNamesType]?: string } = {};
					const { key, value } = changeinfo;
					setobj[key] = value;
					props.updateConf(setobj);
					setopen(false);
				}}
				onCancel={() => {
					setopen(false);
				}}>
				修改绑定按键为：<Tag className='inline'>{changeinfo.value}</Tag>
			</Modal>
		</div>
	);
});
